<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1 class="dashboard-title">欢迎回来, {{ user?.username || '管理员' }}!</h1>
      <p class="dashboard-subtitle">这里是您的网站概览</p>
    </div>
    
    <div class="stats-grid">
      <div class="stat-card" :class="{ 'animate': animateStats }">
        <div class="stat-icon articles-icon">
          <i class="fas fa-file-alt"></i>
        </div>
        <div class="stat-content">
          <h3>{{ stats.articles }}</h3>
          <p>文章</p>
        </div>
        <div class="stat-footer">
          <span class="stat-trend">
            <i class="fas fa-arrow-up"></i> 12% 
          </span>
          <span class="stat-period">与上月相比</span>
        </div>
      </div>
      
      <div class="stat-card" :class="{ 'animate': animateStats }">
        <div class="stat-icon categories-icon">
          <i class="fas fa-folder"></i>
        </div>
        <div class="stat-content">
          <h3>{{ stats.categories }}</h3>
          <p>分类</p>
        </div>
        <div class="stat-footer">
          <span class="stat-trend">
            <i class="fas fa-arrow-up"></i> 5% 
          </span>
          <span class="stat-period">与上月相比</span>
        </div>
      </div>
      
      <div class="stat-card" :class="{ 'animate': animateStats }">
        <div class="stat-icon comments-icon">
          <i class="fas fa-comments"></i>
        </div>
        <div class="stat-content">
          <h3>{{ stats.comments }}</h3>
          <p>评论</p>
        </div>
        <div class="stat-footer">
          <span class="stat-trend">
            <i class="fas fa-arrow-up"></i> 18% 
          </span>
          <span class="stat-period">与上月相比</span>
        </div>
      </div>
      
      <div class="stat-card" :class="{ 'animate': animateStats }">
        <div class="stat-icon messages-icon">
          <i class="fas fa-envelope"></i>
        </div>
        <div class="stat-content">
          <h3>{{ stats.messages }}</h3>
          <p>未读消息</p>
        </div>
        <div class="stat-footer">
          <span class="stat-trend">
            <i class="fas fa-arrow-up"></i> 7% 
          </span>
          <span class="stat-period">与上月相比</span>
        </div>
      </div>
    </div>
    
    <div class="dashboard-charts">
      <div class="chart-card">
        <div class="chart-header">
          <h3>访问量统计</h3>
          <div class="chart-actions">
            <button class="chart-filter-btn active">一周</button>
            <button class="chart-filter-btn">一月</button>
            <button class="chart-filter-btn">一年</button>
          </div>
        </div>
        <div class="chart-body">
          <div class="chart-placeholder">
            <div class="chart-bars">
              <div v-for="(value, index) in [65, 59, 80, 81, 56, 55, 40]" :key="index" 
                   class="chart-bar" :style="{ height: `${value}%` }">
                <span class="chart-value">{{ value }}</span>
              </div>
            </div>
            <div class="chart-labels">
              <span v-for="(day, index) in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']" 
                    :key="index" class="chart-label">{{ day }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>流量来源</h3>
          <div class="chart-actions">
            <button class="chart-refresh-btn">
              <i class="fas fa-sync-alt"></i>
            </button>
          </div>
        </div>
        <div class="chart-body">
          <div class="pie-chart-placeholder">
            <div class="pie-chart">
              <div class="pie-segment" style="--percentage: 45; --color: var(--primary-color);"></div>
              <div class="pie-segment" style="--percentage: 25; --color: var(--secondary-color);"></div>
              <div class="pie-segment" style="--percentage: 15; --color: var(--success-color);"></div>
              <div class="pie-segment" style="--percentage: 15; --color: var(--warning-color);"></div>
            </div>
            <div class="pie-legend">
              <div class="legend-item">
                <span class="legend-color" style="background-color: var(--primary-color);"></span>
                <span class="legend-label">搜索引擎 (45%)</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: var(--secondary-color);"></span>
                <span class="legend-label">直接访问 (25%)</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: var(--success-color);"></span>
                <span class="legend-label">社交媒体 (15%)</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: var(--warning-color);"></span>
                <span class="legend-label">其他来源 (15%)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="dashboard-sections">
      <div class="section recent-articles">
        <div class="section-header">
          <h3>最近文章</h3>
          <router-link :to="{ name: 'admin-articles' }" class="view-all">查看全部</router-link>
        </div>
        
        <div class="section-body">
          <div v-if="recentArticles.length === 0" class="empty-state">
            <i class="fas fa-file-alt"></i>
            <p>暂无文章</p>
          </div>
          
          <div v-else class="article-list">
            <div 
              v-for="(article, index) in recentArticles" 
              :key="index"
              class="article-item"
            >
              <div class="article-thumb" 
                   :style="article.cover ? { backgroundImage: `url(${article.cover})` } : {}">
                <i v-if="!article.cover" class="fas fa-image"></i>
              </div>
              <div class="article-info">
                <h4 class="article-title">{{ article.title }}</h4>
                <div class="article-meta">
                  <span><i class="fas fa-clock"></i> {{ article.created_at }}</span>
                  <span><i class="fas fa-eye"></i> {{ article.views }}</span>
                  <span><i class="fas fa-comment"></i> {{ article.comment_count }}</span>
                </div>
              </div>
              <div class="article-actions">
                <router-link :to="{ name: 'admin-articles-edit', params: { id: article.id } }" class="action-btn edit-btn">
                  <i class="fas fa-edit"></i>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="section recent-comments">
        <div class="section-header">
          <h3>最近评论</h3>
          <router-link :to="{ name: 'admin-comments' }" class="view-all">查看全部</router-link>
        </div>
        
        <div class="section-body">
          <div v-if="recentComments.length === 0" class="empty-state">
            <i class="fas fa-comments"></i>
            <p>暂无评论</p>
          </div>
          
          <div v-else class="comment-list">
            <div 
              v-for="(comment, index) in recentComments" 
              :key="index"
              class="comment-item"
            >
              <div class="comment-avatar">
                <div class="avatar-placeholder">{{ comment.author_name.charAt(0) }}</div>
              </div>
              <div class="comment-info">
                <div class="comment-header">
                  <span class="comment-author">{{ comment.author_name }}</span>
                  <span class="comment-date">{{ comment.created_at }}</span>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-article">
                  <i class="fas fa-file-alt"></i> 文章：{{ comment.article_title }}
                </div>
              </div>
              <div class="comment-actions">
                <button class="action-btn approve-btn" v-if="!comment.approved">
                  <i class="fas fa-check"></i>
                </button>
                <button class="action-btn delete-btn">
                  <i class="fas fa-trash-alt"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="dashboard-bottom">
      <div class="system-info-card">
        <div class="system-info-header">
          <h3>系统信息</h3>
        </div>
        <div class="system-info-body">
          <div class="system-info-item">
            <span class="info-label">系统版本</span>
            <span class="info-value">v1.0.0</span>
          </div>
          <div class="system-info-item">
            <span class="info-label">服务器负载</span>
            <span class="info-value">32%</span>
            <div class="progress-bar">
              <div class="progress" style="width: 32%"></div>
            </div>
          </div>
          <div class="system-info-item">
            <span class="info-label">内存使用</span>
            <span class="info-value">45%</span>
            <div class="progress-bar">
              <div class="progress" style="width: 45%"></div>
            </div>
          </div>
          <div class="system-info-item">
            <span class="info-label">上次更新</span>
            <span class="info-value">2023-10-15 12:30</span>
          </div>
        </div>
      </div>
      
      <div class="quick-actions-card">
        <div class="quick-actions-header">
          <h3>快捷操作</h3>
        </div>
        <div class="quick-actions-body">
          <router-link :to="{ name: 'admin-articles-create' }" class="quick-action-btn">
            <i class="fas fa-file-alt"></i>
            <span>新建文章</span>
          </router-link>
          <router-link :to="{ name: 'admin-categories' }" class="quick-action-btn">
            <i class="fas fa-folder-plus"></i>
            <span>新建分类</span>
          </router-link>
          <router-link :to="{ name: 'admin-media' }" class="quick-action-btn">
            <i class="fas fa-cloud-upload-alt"></i>
            <span>上传图片</span>
          </router-link>
          <a href="#" class="quick-action-btn">
            <i class="fas fa-database"></i>
            <span>备份数据</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      animateStats: false,
      stats: {
        articles: 0,
        categories: 0,
        comments: 0,
        messages: 0
      },
      recentArticles: [],
      recentComments: [],
      user: null
    };
  },
  mounted() {
    this.fetchData();
    
    // 添加动画效果
    setTimeout(() => {
      this.animateStats = true;
    }, 300);
  },
  methods: {
    async fetchData() {
      try {
        // 模拟数据加载
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // 统计数据
        this.stats = {
          articles: 25,
          categories: 8,
          comments: 142,
          messages: 7
        };
        
        // 最近文章
        this.recentArticles = [
          {
            id: 1,
            title: 'Vue3 组合式API的最佳实践',
            created_at: '2023-10-15',
            views: 325,
            comment_count: 15,
            cover: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'
          },
          {
            id: 2,
            title: 'Java中的设计模式详解',
            created_at: '2023-10-12',
            views: 256,
            comment_count: 8,
            cover: 'https://images.unsplash.com/photo-1544256718-3bcf237f3974?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80'
          },
          {
            id: 3,
            title: '后端性能优化的技术细节',
            created_at: '2023-10-08',
            views: 198,
            comment_count: 5,
            cover: null
          }
        ];
        
        // 最近评论
        this.recentComments = [
          {
            id: 1,
            author_name: '张三',
            author_email: 'zhang@example.com',
            created_at: '2023-10-15 14:30',
            content: '这篇文章写得非常好，希望可以看到更多这样的内容！',
            article_title: 'Vue3 组合式API的最佳实践',
            article_id: 1,
            approved: true
          },
          {
            id: 2,
            author_name: '李四',
            author_email: 'li@example.com',
            created_at: '2023-10-14 09:15',
            content: '我在实现这个功能时遇到了一些问题，作者能分享一下解决方案吗？',
            article_title: 'Java中的设计模式详解',
            article_id: 2,
            approved: false
          },
          {
            id: 3,
            author_name: '王五',
            author_email: 'wang@example.com',
            created_at: '2023-10-12 16:45',
            content: '非常感谢分享这些性能优化的技巧，对我的项目帮助很大。',
            article_title: '后端性能优化的技术细节',
            article_id: 3,
            approved: true
          }
        ];
        
        // 当前用户
        this.user = {
          username: '管理员'
        };
      } catch (error) {
        console.error('获取数据失败:', error);
        // 显示错误提示
      }
    }
  }
};
</script>

<style scoped>
:root {
  --primary-color: #4361ee;
  --secondary-color: #3a0ca3;
  --success-color: #2a9d8f;
  --warning-color: #ff9914;
  --danger-color: #e63946;
  --light-color: #f8f9fa;
  --dark-text: #2d3748;
  --light-text: #f8f9fa;
}

.dashboard {
  padding: 20px 0;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 8px;
}

.dashboard-subtitle {
  font-size: 16px;
  color: #666;
}

/* 统计卡片样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.stat-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.stat-card:nth-child(1) {
  transition-delay: 0.1s;
}

.stat-card:nth-child(2) {
  transition-delay: 0.2s;
}

.stat-card:nth-child(3) {
  transition-delay: 0.3s;
}

.stat-card:nth-child(4) {
  transition-delay: 0.4s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
}

.articles-icon {
  background: linear-gradient(45deg, #4361ee, #4cc9f0);
}

.categories-icon {
  background: linear-gradient(45deg, #3a0ca3, #7209b7);
}

.comments-icon {
  background: linear-gradient(45deg, #2a9d8f, #94d2bd);
}

.messages-icon {
  background: linear-gradient(45deg, #ff9914, #ffbf69);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: var(--dark-text);
  letter-spacing: 0.5px;
}

.stat-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.stat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.stat-trend {
  color: var(--success-color);
  font-weight: 600;
}

.stat-period {
  color: #999;
}

/* 图表样式 */
.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-text);
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.chart-filter-btn {
  background: #f5f7fb;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.chart-filter-btn.active {
  background: var(--primary-color);
  color: white;
}

.chart-refresh-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fb;
  border: none;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.chart-refresh-btn:hover {
  background: var(--primary-color);
  color: white;
}

.chart-body {
  padding: 20px;
  height: 250px;
}

.chart-placeholder {
  height: 100%;
  width: 100%;
  position: relative;
}

.chart-bars {
  display: flex;
  height: calc(100% - 30px);
  justify-content: space-around;
  align-items: flex-end;
  padding-top: 20px;
}

.chart-bar {
  width: 30px;
  background: var(--primary-color);
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: all 0.5s ease;
}

.chart-value {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #666;
}

.chart-labels {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}

.chart-label {
  font-size: 12px;
  color: #666;
}

/* 饼图样式 */
.pie-chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
}

.pie-chart {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f7fb;
}

.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  background: conic-gradient(
    var(--color) 0%,
    var(--color) calc(var(--percentage) * 1%),
    transparent calc(var(--percentage) * 1%)
  );
}

.pie-segment:nth-child(2) {
  transform: rotate(calc(var(--percentage) * 3.6deg));
}

.pie-segment:nth-child(3) {
  transform: rotate(calc((var(--percentage) + 25) * 3.6deg));
}

.pie-segment:nth-child(4) {
  transform: rotate(calc((var(--percentage) + 25 + 15) * 3.6deg));
}

.pie-legend {
  margin-left: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 10px;
}

.legend-label {
  font-size: 14px;
  color: #666;
}

/* 内容部分样式 */
.dashboard-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.section:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-text);
}

.view-all {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.view-all:hover {
  text-decoration: underline;
}

.section-body {
  padding: 20px;
  min-height: 300px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #aaa;
}

.empty-state i {
  font-size: 36px;
  margin-bottom: 10px;
}

/* 文章列表样式 */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.article-item {
  display: flex;
  gap: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.2s;
}

.article-item:hover {
  background: #f0f0f0;
}

.article-thumb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  background-color: #e0e0e0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  flex-shrink: 0;
}

.article-info {
  flex-grow: 1;
}

.article-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 12px;
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.article-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e0e0e0;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.action-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.edit-btn:hover {
  background: var(--primary-color);
}

.delete-btn:hover {
  background: var(--danger-color);
  border-color: var(--danger-color);
}

.approve-btn:hover {
  background: var(--success-color);
  border-color: var(--success-color);
}

/* 评论列表样式 */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comment-item {
  display: flex;
  gap: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.2s;
}

.comment-item:hover {
  background: #f0f0f0;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.comment-info {
  flex-grow: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 600;
  color: var(--dark-text);
}

.comment-date {
  font-size: 12px;
  color: #999;
}

.comment-content {
  font-size: 14px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comment-article {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 底部卡片样式 */
.dashboard-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.system-info-card, .quick-actions-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.system-info-card:hover, .quick-actions-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.system-info-header, .quick-actions-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.system-info-header h3, .quick-actions-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-text);
}

.system-info-body, .quick-actions-body {
  padding: 20px;
}

.system-info-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.system-info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 14px;
}

.info-value {
  color: var(--dark-text);
  font-weight: 600;
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
}

.quick-actions-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  color: var(--dark-text);
  text-decoration: none;
  transition: all 0.2s;
  text-align: center;
}

.quick-action-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-5px);
}

.quick-action-btn i {
  font-size: 24px;
  margin-bottom: 10px;
}

.quick-action-btn span {
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard-charts,
  .dashboard-sections,
  .dashboard-bottom {
    grid-template-columns: 1fr;
  }
  
  .chart-body {
    height: 200px;
  }
  
  .pie-chart {
    width: 120px;
    height: 120px;
  }
  
  .quick-actions-body {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 